<!--
 * @Author: your name
 * @Date: 2020-09-16 18:30:05
 * @LastEditTime: 2020-09-22 18:27:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \im.xuanma.cnd:\study\vue-admin-template\src\views\form\index.vue
-->
<template>
<el-card class="content">
    <div style="display: flex">
        <el-tabs v-model="activeName" type="card" style="width: 62%">
            <el-tab-pane label="所有房间" name="first">
                <div v-for="i of checkInlist" :key="i.id" style="display: inline-block" @click="edit(i)">
                    <el-card :class="'content-box ' + status[i.status - 1]">
                        <div style="text-align: center; margin-bottom: 90px">
                            <p>{{ i.room_number }}</p>
                            <p>{{ i.room_name }}</p>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
            <!--动态生成房型-->
            <el-tab-pane v-for="j of house_List" :key="j.id" :label="j.room_name" :name="j.room_name">
                <div v-for="i of checkInlist" :key="i.id" style="display: inline-block" @click="edit(i)">
                    <div v-if="i.room_name == j.room_name">
                        <el-card :class="'content-box ' + status[i.status - 1]">
                            <div style="text-align: center; margin-bottom: 90px">
                                <p>{{ i.room_number }}</p>
                                <p>{{ i.room_name }}</p>
                            </div>
                        </el-card>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div style="width: 38%; margin-top: 40px">
            <div class="top_line"></div>
            <el-form ref="form" :model="query" label-width="80px">
                <!-- <el-form-item label="房号：">
            <div style="display:flex">
              <el-input v-model="query.room_number" />
              <el-button type="primary">搜索</el-button>
            </div>
          </el-form-item>-->
                <el-form-item label="楼层：">
                    <el-select v-model="query.floor" placeholder="请选择楼层" size="medium">
                        <el-option v-for="i of options" :key="i.value" :label="i.label" :value="i.label" />
                    </el-select>
                    <el-button type="primary" style="margin-left: 20px" size="medium" @click="search()">搜索</el-button>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="query.status" placeholder="请选择状态" size="medium">
                        <el-option label="空房" value="1" />
                        <el-option label="脏房" value="2" />
                        <el-option label="预定" value="3" />
                        <el-option label="住人" value="4" />
                    </el-select>
                    <el-button type="info" style="margin-left: 20px" size="medium" @click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="status-box">
                <div class="status all">全部状态</div>
                <span class="number">{{ checkInlist.length }} 间</span>
            </div>
            <div class="status-box">
                <div class="status vacant-room">空房</div>
                <span class="number">{{ count_room.count }} 间</span>
            </div>
            <div class="status-box">
                <div class="status dirty-room">脏房</div>
                <span class="number">{{ count_room.count2 }} 间</span>
            </div>
            <div class="status-box">
                <div class="status reserve">预定</div>
                <span class="number">{{ count_room.count3 }} 间</span>
            </div>
            <div class="status-box">
                <div class="status induct">住入</div>
                <span class="number">{{ count_room.count4 }} 间</span>
            </div>
        </div>
    </div>
    <!--弹框-->
    <el-dialog :title="title" :visible.sync="dialogVisible" @close="close" width="40%">
        <el-form ref="form" :model="form" :rules="rules" status-icon label-width="90px">
            <!--空房-->
            <div style="display:flex">
                <el-form-item v-if="statusNum == 1" label="房价:" prop="money">
                    <el-input v-model.number="form.money" :disabled="true" />
                </el-form-item>
                <el-form-item v-if="statusNum == 1" label="押金:" prop="cash_pledge">
                    <el-input v-model.number="form.cash_pledge" :disabled="true" />
                </el-form-item>
            </div>
            <div style="display:flex">
                <el-form-item v-if="statusNum == 1" label="总计:" prop="actual_amount">
                    <el-input v-model.number="form.actual_amount" :disabled="true" />
                </el-form-item>

                <el-form-item v-if="statusNum == 1" label="入住/预定:" prop="ischeckin">
                    <el-select v-model="form.ischeckin" style="width:92%">
                        <el-option label="入住" value="入住" />
                        <el-option label="预定" value="预定" />
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item v-if="statusNum == 1" label="类型:" prop="member_type">
                <el-select v-model="form.member_type" @change="changeType" style="width:100%">
                    <el-option label="普通用户" value="普通用户" />
                    <el-option label="会员" value="会员" />
                </el-select>
            </el-form-item>

            <el-form-item v-if="form.member_type == '会员' && statusNum == 1" label="手机号码:" prop="phone">
                <el-input v-model.number="form.phone" />
            </el-form-item>
            <el-form-item v-if="statusNum == 1" label="姓名:" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item v-if="statusNum == 1" label="身份证:" prop="id_number">
                <el-input v-model="form.id_number" />
            </el-form-item>

            <!--脏房-->
            <span v-if="statusNum == 2">该房间还未打扫，是否确定已打扫?</span>
            <!--预定-->
            <span v-if="statusNum == 3">请先核对预定订单客户信息，核对无误后点击确定入住！</span>
            <!--住入-->
            <el-form-item v-if="statusNum == 4" label="退房/换房:" prop="checkout">
                <el-select v-model="form.checkout">
                    <el-option label="退房" value="退房" />
                    <el-option label="换房" value="换房" />
                </el-select>
            </el-form-item>
            <el-form-item v-if="form.checkout == '换房'" label="当前空房:" prop="newRoom">
                <el-select v-model="form.newRoom">
                    <el-option v-for="i of vacant_room_list" :key="i.id" :label="i.room_number" :value="i.room_number" />
                </el-select>
            </el-form-item>
            <!--钟点-->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
    </el-dialog>
</el-card>
</template>

<script>
import {
    checkIn_list,
    checkIn_reservation,
    clear_pigsty,
    reserve,
    check_out,
    vacant_room,
    statistics,
} from "@/api/check_in";
import {
    house_type_list
} from "@/api/house_type";
import {
    validation
} from "@/api/member";
export default {
    data() {
        return {
            activeName: "first", // 标签页
            query: {
                floor: "",
                status: "",
            },
            form: {
                member_type: "普通用户", //用户类型
                ischeckin: "入住", //入住/预定
                phone: null, //会员手机号
                name: "", //姓名
                id_number: "", //身份证
                money: "", //应收金额
                cash_pledge: "", //应收押金
                actual_amount: "", //实际金额
                checkout: "退房", //退房/换房
                newRoom: "", //要换的房间号
            },
            title: "办理入住",
            dialogVisible: false,
            statusNum: null, // 动态v-if
            // 状态样式
            // 1.空房 2.脏房 3.预定 4.住入 5.钟点
            status: ["vacant-room", "dirty-room", "reserve", "induct", "hour"],
            //当前点击的房间信息
            roomInfo: {},
            //当前可用空房
            vacant_room_list: [],
            //统计当前各种状态房间总数
            count_room: {},
            // 所有房间列表
            checkInlist: [],
            //所有房型列表
            house_List: [],
            //验证规则
            rules: {
                ischeckin: [{
                    required: true,
                    message: "请选择入住/预定",
                    trigger: "blur",
                }, ],
                member_type: [{
                    required: true,
                    message: "请选择类型",
                    trigger: "blur",
                }, ],
                phone: [{
                        required: true,
                        message: "请输入会员手机号",
                        trigger: "blur",
                    },
                    {
                        validator: function (rule, value, callback) {
                            if (/^1[34578]\d{9}$/.test(value) == false) {
                                callback(new Error("请输入正确的手机号"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur",
                    },
                    {
                        validator: async function (rule, value, callback) {
                            var data = await validation({
                                phone: value
                            })
                            console.log(data)
                            if (data.code != 20000) {
                                callback(new Error(data.message));
                            } else {
                                callback();
                                this.$message.success("22");
                            }

                        },
                        trigger: "blur",
                    },
                ],
                name: [{
                    required: true,
                    message: "请输入姓名",
                    trigger: "blur",
                }, ],
                id_number: [{
                        required: true,
                        message: "请输入身份证号",
                        trigger: "blur",
                    },
                    {
                        pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                        message: "证件号码格式有误！",
                        trigger: "blur",
                    },
                ],

                money: [{
                        required: true,
                        message: "请输入应收金额",
                        trigger: "blur",
                    },
                    {
                        type: "number",
                        message: "应收金额必须是数字",
                        trigger: "blur",
                    },
                ],

                cash_pledge: [{
                        required: true,
                        message: "请输入应收押金",
                        trigger: "blur",
                    },
                    {
                        type: "number",
                        message: "应收押金必须是数字",
                        trigger: "blur",
                    },
                ],
                actual_amount: [{
                        required: true,
                        message: "请输入实际金额",
                        trigger: "blur",
                    },
                    {
                        type: "number",
                        message: "实际金额必须是数字",
                        trigger: "blur",
                    },
                ],
                checkout: [{
                    required: true,
                    message: "请选择",
                    trigger: "blur",
                }, ],
                newRoom: [{
                    required: true,
                    message: "请选择",
                    trigger: "blur",
                }, ],
            },
            //楼层
            options: [{
                    value: 1,
                    label: "一楼",
                },
                {
                    value: 2,
                    label: "二楼",
                },
                {
                    value: 3,
                    label: "三楼",
                },
                {
                    value: 4,
                    label: "四楼",
                },
                {
                    value: 5,
                    label: "五楼",
                },
                {
                    value: 6,
                    label: "六楼",
                },
                {
                    value: 7,
                    label: "七楼",
                },
                {
                    value: 8,
                    label: "八楼",
                },
                {
                    value: 9,
                    label: "九楼",
                },
                {
                    value: 10,
                    label: "十楼",
                },
                {
                    value: 11,
                    label: "十一楼",
                },
            ],
        };
    },
    created() {
        this.checkInList();
        this.houseList();
        this.count();
    },
    methods: {
        // 所有房间列表
        async checkInList() {
            const {
                data
            } = await checkIn_list(this.query);
            this.checkInlist = data;
        },
        // 所有房型列表
        async houseList() {
            const {
                data
            } = await house_type_list({
                page: 1,
                limit: 10,
            });
            this.house_List = data;
        },
        //统计各种状态
        async count() {
            const {
                data
            } = await statistics();
            this.count_room = data;
        },

        //搜索
        search() {
            this.checkInList();
        },
        //重置
        reset() {
            this.query.status = "";
            this.query.floor = "";
            this.checkInList();
        },
        //关闭对话框
        close() {
            this.$refs.form.resetFields();
        },

        edit(i) {
            switch (i.status) {
                case 1:
                    this.title = "办理入住/预定";

                    break;
                case 2:
                    this.title = "清理脏房";
                    break;
                case 3:
                    this.title = "处理预定";
                    break;
                case 4:
                    this.title = "办理退房/换房";
                    vacant_room().then((data) => {
                        this.vacant_room_list = data.data;
                    });
                    break;
                case 5:
                    this.title = "终点房";
                    break;
            }

            this.dialogVisible = true;
            this.statusNum = i.status;
            this.$message.success(i.room_number + "");
            this.roomInfo = i;
            this.form.checkout = "退房";
            this.changeType();
            this.form.id_number = ''
        },
        //会员跟普通用户不一样的价格
        changeType() {
            console.log(this.form.member_type);

            if (this.form.member_type == "普通用户") {
                this.form.money = this.roomInfo.room_price;
                this.form.cash_pledge = this.roomInfo.earnest;
                var cont = this.roomInfo.room_price + this.roomInfo.earnest;
                this.form.actual_amount = cont;
            } else {
                this.form.money = this.roomInfo.member_price;
                this.form.cash_pledge = this.roomInfo.earnest;
                var cont = this.roomInfo.member_price + this.roomInfo.earnest;
                this.form.actual_amount = cont;
            }
        },
        // //验证是否是会员
        // validation() {

        // },
        confirm() {
            this.$refs.form.validate(async (valid) => {
                console.log(valid);
                if (valid) {
                    this.dialogVisible = false;

                    switch (this.statusNum) {
                        case 1:
                            console.log("办理入住/预定");
                            const {
                                code
                            } = await checkIn_reservation({
                                member_type: this.form.member_type,
                                ischeckin: this.form.ischeckin,
                                phone: this.form.phone,
                                name: this.form.name,
                                id_number: this.form.id_number,
                                money: this.form.money,
                                cash_pledge: this.form.cash_pledge,
                                actual_amount: this.form.actual_amount,
                                room_name: this.roomInfo.room_name,
                                room_number: this.roomInfo.room_number,
                                floor: this.roomInfo.floor,
                            });
                            if (code === 20000) {
                                this.checkInList();
                                this.count();
                                this.$message.success("办理成功!");
                            }
                            break;
                        case 2:
                            console.log("清理脏房");
                            clear_pigsty({
                                room_number: this.roomInfo.room_number,
                            }).then((data) => {
                                console.log(data);
                                if (data.code === 20000) {
                                    this.checkInList();
                                    this.count();
                                    this.$message.success("处理成功!");
                                }
                            });
                            break;
                        case 3:
                            console.log("处理预定");
                            reserve({
                                room_number: this.roomInfo.room_number,
                            }).then((data) => {
                                console.log(data);
                                if (data.code === 20000) {
                                    this.checkInList();
                                    this.count();
                                    this.$message.success("处理成功!");
                                }
                            });

                            break;
                        case 4:
                            console.log("办理退房/换房");
                            check_out({
                                is_checkout: this.form.checkout,
                                room_number: this.roomInfo.room_number,
                                newRoom: this.form.newRoom,
                            }).then((data) => {
                                console.log(data);
                                if (data.code === 20000) {
                                    this.checkInList();
                                    this.count();
                                    this.$message.success("处理成功!");
                                }
                            });
                            break;
                        case 5:
                            console.log("终点房");
                            break;
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
html,
body,
#app {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.content {
    margin: 15px;
    min-height: 100%;
}

.content-box {
    width: 120px;
    height: 120px;
    display: inline-block;
    margin-right: 12px;
}

.content-box:hover {
    opacity: 0.7;
    cursor: Pointer;
}

.status-box {
    display: flex;
    margin-bottom: 20px;
    margin-left: 23px;
}

.status {
    width: 110px;
    height: 25px;
    margin-right: 20px;
    text-align: center;
    line-height: 24px;
}

.all {
    background-image: linear-gradient(to right,
            rgb(228, 218, 218),
            rgba(255, 0, 0, 0));
}

.vacant-room {
    background-image: linear-gradient(to right,
            rgb(44, 131, 231),
            rgba(235, 232, 50, 0));
}

.dirty-room {
    background-image: linear-gradient(to right,
            rgb(133, 128, 128),
            rgba(255, 0, 0, 0));
}

.reserve {
    background-image: linear-gradient(to right,
            rgb(247, 230, 81),
            rgba(235, 232, 50, 0));
}

.induct {
    background-image: linear-gradient(to right,
            rgba(255, 90, 90, 1),
            rgba(235, 0, 0, 0));
}

.hour {
    background-image: linear-gradient(to right,
            rgb(202, 141, 8),
            rgba(245, 144, 50, 0));
}

.number {
    line-height: 24px;
}

.top_line {
    height: 18px;
    border-top: 1px solid #e4e7ed;
}
</style>
